<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-03 14:59:07
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 13:41:47
 * @FilePath: /amap-web-vr/src/views/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
      <div class="container">

      <vc-viewer
        ref="vcViewer"
        :animation="false"
        :base-layer="false"
        :base-layer-picker="false"
        :scene-mode-picker="false"
        
        :navigationHelpButton = 'false'
        :shouldAnimate = 'false'
        :selectionIndicator="false"
        :useBrowserRecommendedResolution = 'false'
      >
      <map-header-view />
      <vc-vr-control position="bottom-right" :offset="[10,250]"/>
      <vc-street-control position="bottom-right" :offset="[10,210]"/>
      <vc-compass-control  position="bottom-right" :offset="[10,170]"  />

        <!-- <vc-geojson-control position="top-right" :offset="[355,40]" /> -->
      <vc-vr-collect-control position="top-right" :offset="[295,40]" />
      <vc-vr-zuji-control position="top-right" :offset="[235,40]"/>
      <vc-sign-control position="top-right" :offset="[190,40]" />
      <vc-pitch-control position="top-right" :offset="[145,40]" />
      <vc-draw-control position="top-right" :offset="[100,40]" />
      <vc-collect-list-control  position="top-right" :offset="[55,40]" />
      <vc-layer-control  position="top-right" :offset="[10,40]" />
    
       <VcZoomControl 
            :offset="[10,70]"
            position="bottom-right"
            background="#fff"
            borderRadius="5px"
            :zoomInOptions="{color:'#333'}"
            :zoomOutOptions="{color:'#333'}"
            :zoomResetOptions="{color:'#333'}"
       />
       <VcMyLocation :offset="[12,30]" position="bottom-right" /> 


 
        <vc-terrain-provider-cesium ></vc-terrain-provider-cesium>
        
        <vc-layer-imagery >
          <vc-imagery-provider-arcgis ref="provider"></vc-imagery-provider-arcgis>
        </vc-layer-imagery>
        
        <!-- 天地图详情 -->
        <vc-layer-imagery >
          <vc-imagery-provider-tianditu map-style="cia_c" token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
        </vc-layer-imagery> 
            <vc-datasource-geojson
        :data="Json"
        stroke="red"
      ></vc-datasource-geojson>
  
   
    </vc-viewer>


      </div>
</template>

<script lang="ts" setup>
import Json from "../../assets/110000.json";
// import { ref,watch } from 'vue';
import MapHeaderView from './components/map-header-view.vue'
import { 
  // VcElevationControl,
  VcStreetControl,
  VcVrControl,
  VcCompassControl,
  VcCollectListControl,
  VcLayerControl,
  VcDrawControl,
  VcPitchControl,
  VcSignControl,
  VcVrZujiControl,
  VcVrCollectControl,
  // VcGeojsonControl

} from "./control";


</script>


<style lang="scss" scoped>
.container{
    width: 100vw;
    height: 100vh;
    :deep(.vc-fab){
      .vc-btn{
        min-width: 34px;
        min-height: 34px;
        border-radius: 5px;
        background: #fff !important;
        padding: 0px;
      }
      .vc-icon{
          color:#333;
            font-size: 20px;
      }
      .vc-btn--fab .vc-icon{
            font-size: 15px !important;
      }            
    }      
    :deep(.cesium-viewer-toolbar){
      .cesium-home-button{
        background-color: #fff;
        fill:#333333;
        &:hover{
          box-shadow: none;
          border: none;
        }
      }
    }
}
.shizi{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 50px;
  color: #fff;
  z-index: 9999;
}

</style>
